<template>
  <i :class="classNameList" :style="styles" />
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  const props = defineProps({
    name: {
      type: String,
      default: ''
    },
    size: {
      type: [String, Number],
      default: ''
    },
    color: {
      type: String,
      default: 'inherit'
    },
    colorful: {
      type: Boolean,
      default: false
    }
  })

  const classNameList = computed(() => {
    const list = [props.name]
    if (props.colorful) {
      list.push('c-icon')
    } else {
      list.push('x-icon')
    }
    return list.join(' ')
  })
  const styles = computed(() => {
    return {
      'font-size': typeof props.size === 'number' ? `${props.size}px` : props.size,
      color: props.color
    }
  })
</script>

<style lang="scss"></style>
